<template>
    <div class="table-main">
        <div class="query-content">
          <div class="query-search">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
              <el-form-item label="">
                <el-input  v-model="formInline.likeString" placeholder="请输入发布单位或标准名称" style="min-width: 205px"/>
              </el-form-item>
              <el-form-item label="发布日期:">
                <el-date-picker
                  v-model="formInline.date1"
                  type="daterange"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  clearable
             
                />
              </el-form-item>
            </el-form>
          </div>
          <div class="query-btn">
            <el-button  type="primary" @click="onSubmit">查询</el-button>
            <el-button  type="success" @click="onReset">重置</el-button>
          </div>
        </div>
        <div class="tabs-main">
            <el-tabs v-model="unitName" class="demo-tabs" @tab-click="handleClick">
                <el-tab-pane v-for="(item, index) in unitsList" :key="index" :name="item.value" :label="item.label">
                    <template #label>
                        <span class="tabs-label">
                            {{item.label}}
                        </span>
                    </template>
                    <!-- <TableTemplate></TableTemplate> -->
                </el-tab-pane>
            </el-tabs>
        </div>
        <el-table :data="tableData" border style="width: 100%" size="large" empty-text="暂无数据">
          <el-table-column width="80" label="序号" align="center">
            <template #default="scope">
              {{ (currentPage - 1) * pageSize + scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column prop="issuedUnit" width="150" label="发布单位" align="center"/>
          <el-table-column prop="groupStandardNumber" width="500" label="标准编号" align="center"/>
          <el-table-column prop="groupStandardName" width="150" label="标准名称" align="center"/>
          <el-table-column prop="releaseDate" label="发布日期" align="center"/>
        </el-table>
        <div class="pagination-content">
          <el-config-provider :locale="zhCn">
            <el-pagination
              v-model:current-page="currentPage"
              v-model:page-size="pageSize"
              :page-sizes="[10, 20, 30, 100]"
              :small="small"
              background
              layout="sizes, prev, pager, next, jumper"
              :total="total"                   
              @size-change="handleSizeChange"    
              @current-change="handleCurrentChange" 
            />
          </el-config-provider>
        </div>
        
    </div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import type { TabsPaneContext } from 'element-plus'
import { ElConfigProvider } from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn';
import axios from 'axios'
import { formatDate } from '@/utils/dateFormat';
import { useRouter } from 'vue-router';
  import { getServerUrl } from '@/utils/url';
  const serverUrl = getServerUrl();
const router = useRouter();
const unitName = ref('')
const tableData = ref([]);
const total = ref(0);
const formInline = reactive({
  date1: [],
  likeString: ''
})
const currentPage = ref(1);
const pageSize = ref(10);
const small = ref(false)
const unitsList = ref([])
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab.props.name)
  formInline.likeString = tab.props.name as string;
}
const onSubmit = () => {
    currentPage.value = 1;
  initData()
}
const onReset = () => {
  unitName.value = ''
  formInline.date1 = [];
  formInline.likeString = '';
  currentPage.value = 1;
  initData();
}
const handleSizeChange = (val: number) => {
  pageSize.value = val;
  initData(); 
};
const handleCurrentChange = (val: number) => {
  currentPage.value = val;
  initData(); 
};
const showDetail = (value: any) => {
  // window.open(fileUrl.value, '_blank'); // 使用_blank在新窗口中打开
}
const getList = () =>{
  axios.get(serverUrl+'groupStandard/listIssuedUnits')
    .then(response => {
      unitsList.value = response.data.data; 
      unitsList.value.unshift({id: null, value: "", label: "全部"})
      console.log(unitsList)
    })
    .catch(error => {
      console.error('请求失败', error);
    }) 
}
const initData = async () => {
  try{
    const startReleaseDate = formatDate(formInline.date1[0], 'yyyy-MM-dd HH:mm:ss');
    const endReleaseDate = formatDate(formInline.date1[1], 'yyyy-MM-dd HH:mm:ss');
    const response = await axios.get(serverUrl+'groupStandard/externalList', {
          params: {
            pageNum: currentPage.value,
            pageSize: pageSize.value,
            startReleaseDate:startReleaseDate,
            endReleaseDate:endReleaseDate,
            likeString:formInline.likeString,
            issuedUnitName:''
          }
      });
      tableData.value = response.data.data.list; 
      total.value = response.data.data.total; 
  } catch (error) {
      console.error('数据加载失败:', error);
  }
  
        
};
onMounted(() => {
  initData()
  getList()
})
</script>
<style lang="scss" scoped>
.query-content {
  display: flex;
  justify-content: space-between
}

.query-search {
  width: 70%;
}

.query-btn {
  min-width: 145px;
}

.pagination-content {
  margin-top: 1.43rem;
  display: flex;
  justify-content: center;
}

.icon-w {
  margin-left: 20px;
}

.association-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.association-tag {
  cursor: pointer;
  padding: 6px 12px;
}

.tabs-main {
  .tabs-label {
    display: flex;
    text-align: center;
    align-items: center;
    font-size: 18px;
    // color:#409eff;
  }
}

::v-deep .el-table__empty-text {
  color: #666;
  /* 文本颜色 */
  font-size: 16px;
  /* 文本大小 */
  margin: 40px 0;
  /* 上下间距，避免过于紧凑 */
}
</style>